<template>
  <!-- 变更记录弹窗 开始 -->
  <el-dialog
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    :show-close="false"
    :append-to-body="false"
    :class="{ 'mobile-el-dialog' : isMobile}"
    title=""
    class="large-common-dialog-size logs-dialog"
    center
    @open="openDialog"
    @closed="handleCloseAfter">
    <div class="main">
      <div class="title-wrap">
        <Title :is-show="true" :total="listData.total" font-size="16px" title="变更记录" />
      </div>
      <div class="dialog-scroll">
        <div v-loading="listLoading" class="table-list">
          <el-row>
            <el-table
              v-if="listData.items.length > 0"
              :data="listData.items"
              height="400"
              class="table-fixed"
              element-loading-text="加载中..."
              empty-text="暂无数据"
              header-cell-class-name="order-data-header-cell"
              fit
              hightlight-current-row>
              <el-table-column
                v-for="(titleItem, tIndex) in listData.titles"
                :key="titleItem + tIndex"
                :label="titleItem"
                :prop="titleItem"
                :min-width="130"
                align="left">
                <template slot-scope="scope">
                  <div class="content-area">
                    <el-tooltip v-if="(scope.row[tIndex] || scope.row[tIndex] === 0) && scope.row[tIndex] !== ' '" placement="top">
                      <div slot="content" class="max-width-200">{{ scope.row[tIndex] }}</div>
                      <div :style="{textAlign: titleItem.indexOf('价') !== -1 ? 'right' : 'left'}" class="overflow text-wrap">{{ scope.row[tIndex] }}</div>
                    </el-tooltip>
                    <div v-else>--</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <empty-placeholder v-else style="margin: 60px 0" />
          </el-row>
        </div>
      </div>
      <div class="footer-container">
        <div class="pagination-area">
          <el-pagination
            v-show="listData.total > 0"
            :current-page="listData.page"
            :page-size="listData.perPage"
            :total="listData.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="isMobile?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </el-dialog>
  <!-- 变更记录弹窗弹窗 -->
</template>

<script>
// 表格列表数据
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
// 组件
import Title from '@/components/Title';
import FilterInput from '@/components/Tool/filter';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import platformIcon from '@/components/Common/platformIcon';
import ResourceInfo from '@/components/ResourceInfo';
// api
import { getGoodsLogs } from '@/api/commerce';
// filter
import {
  costTypeFilter,
  orderTypeStatusFilter,
  setReviewState,
  orderStatusFilter } from '@/filters/status';
import { moneyFilter } from '@/filters/number';
import { standardFormatNoHour, format } from '@/filters/date';

export default {
  name: 'LogsDialog',
  components: {
    Title,
    FilterInput,
    EmptyPlaceholder,
    platformIcon,
    ResourceInfo },
  filters: {
    costTypeFilter,
    orderTypeStatusFilter,
    setReviewState,
    moneyFilter,
    standardFormatNoHour,
    format,
    orderStatusFilter },
  props: {
    specificationCodeId: {
      type: String,
      default: ''
    },
    goodsId: {
      type: String,
      default: ''
    },
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      paramsObj: {},
      listData: {
        items: []
      },
      page: 1,
      perPage: 20,
      listLoading: true
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    }
  },
  methods: {
    hasRouteAuth,
    handleClose() {
      this.initParams();
      this.$emit('close');
    },
    handleCloseAfter() {
      this.listData = { items: [] };
    },
    openDialog() {
      this.fetchData(true);
    },
    initParams() {
      this.paramsObj = {};
      this.page = 1;
      this.perPage = 20;
    },
    updateList() {
      this.fetchData();
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = {
        page: this.page,
        perPage: this.perPage,
        goodsId: this.goodsId,
        specificationCodeId: this.specificationCodeId
      };
      this.listLoading = true;
      getGoodsLogs(params).then(res => {
        if (res.code === 200) {
          this.listData = res.data;
        }
        this.listLoading = false;
      }).catch(e => {
        if (!e || e.message !== 'cancel') {
          this.listLoading = false;
        }
        console.log(e);
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.logs-dialog {
  ::v-deep {
    .el-dialog {
    }
    .el-dialog__body {
      padding: 10px 25px 0;
    }
  }
}
.el-pagination {
  padding: 0 !important;
}
.main {
  position: relative;
  height: 485px;
}
.title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
}
.table-list {
  min-height: 300px;
}
.max-width-200 {
  max-width: 200px;
}
.el-table::before {
  display: none;
}
.dialog-scroll {
  height: 405px;
  @include scrollBar($x: hidden, $y: auto);
}
.footer-container{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
}
.content-area {
  width: 100%;
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
